<template>
    <!-- 页头 -->
    <el-page-header :icon="null" >
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          欢迎
        </span>
        <el-tag>admin</el-tag>
      </div>
      
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right"></el-divider>
    <div class="welcome-container">
      <h1>{{ welcomeMessage }}</h1>
    </div>
    <el-calendar style="background-color:azure;">
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
  </template>
  
  <script>
   import { ref } from 'vue'  
 import { computed } from 'vue'
 import { reactive } from 'vue'
 import { ElDrawer, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router';
 import { h } from 'vue'
import { ElDivider } from 'element-plus'
import { color } from 'echarts';

 const router = useRouter();
  export default {
      setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
    data() {
      return {
        // 假设这是你从动态数据源获取的用户信息
        userData: {
          username: "Admin",
          // 其他用户信息...
        },
      };
    },
    methods: {
      center(){
        this.$router.push('/admincenter')
      },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },
  },
    computed: {
      welcomeMessage() {
        // 利用计算属性生成欢迎信息
        return `欢迎登录，${this.userData.username}！`;
      },
    },
  };
  </script>
  
  <style scoped>
  .welcome-container {
    text-align: center;
    padding: 20px;
    /* 可以添加其他样式 */
  }
  .custom-button {
  border: none; /* 去掉边框 */
  padding: 0;   /* 去掉内边距 */
  margin-left:10px; /* 左移10像素，根据需要调整 */
  background-color: transparent; /* 使背景透明，以便不显示默认按钮背景颜色 */
  cursor: pointer; /* 显示指针样式，表明是可点击的 */
  }
  .is-selected {
  color: #1989fa;
}
  </style>